<template>

    <vue-table :data-source="tableList" :search-config="searchConfig" @open-complex="openComplex">
        <template slot="search" scope="props">
            <i-form :label-width="80">
                <Row>
                    <i-col span="11">
                        <Form-item label="姓名">
                            <i-input v-model="props.items.name" placeholder="请输入姓名"></i-input>
                        </Form-item>
                    </i-col>
                    <i-col span="11" offset="2">
                        <Form-item label="电话">
                            <i-input v-model="props.items.mobile" placeholder="请输入电话号码"></i-input>
                        </Form-item>
                    </i-col>
                </Row>
                <transition name="fade">
                    <Row v-if="openComplexStatus">
                        <i-col span="11">
                            <Form-item label="省份">
                                <i-select v-model="props.items.province_id" style="width: 100%"
                                          :filterable="true"
                                          :clearable="true"
                                          @on-change="getCityList"
                                          placeholder="请选择省份">
                                    <i-option v-for="item in provinceList" :value="item.id"
                                              :key="item.id">{{item.name}}</i-option>
                                </i-select>
                            </Form-item>
                        </i-col>
                        <i-col span="11" offset="2">
                            <Form-item label="城市">
                                <i-select v-model="props.items.city_id" style="width: 100%"
                                          :filterable="true"
                                          :clearable="true"
                                          @on-change="getSchoolList"
                                          placeholder="请选择城市">
                                    <i-option v-for="item in cityList" :value="item.id"
                                              :key="item.id">{{item.name}}</i-option>
                                </i-select>
                            </Form-item>
                        </i-col>
                        <i-col span="11">
                            <Form-item label="学校">
                                <i-select v-model="props.items.school_id" style="width: 100%"
                                          :filterable="true"
                                          :clearable="true"
                                          @on-change="getDeptList"
                                          placeholder="请选择学校">
                                    <i-option v-for="item in schoolList" :value="item.id"
                                              :key="item.id">{{item.name}}</i-option>
                                </i-select>
                            </Form-item>
                        </i-col>
                        <i-col span="11" offset="2">
                            <Form-item label="学院">
                                <i-select v-model="props.items.dept_id" style="width: 100%"
                                          :filterable="true"
                                          :clearable="true"
                                          @on-change="getSpecialityList"
                                          placeholder="请选择学院">
                                    <i-option v-for="item in deptList" :value="item.id"
                                              :key="item.id">{{item.name}}</i-option>
                                </i-select>
                            </Form-item>
                        </i-col>
                        <i-col span="11">
                            <Form-item label="专业">
                                <i-select v-model="props.items.speciality_id" style="width: 100%"
                                          :filterable="true"
                                          :clearable="true"
                                          placeholder="请选择专业">
                                    <i-option v-for="item in specialityList" :value="item.id"
                                              :key="item.id">{{item.name}}</i-option>
                                </i-select>
                            </Form-item>
                        </i-col>
                        <i-col span="11" offset="2">
                            <Form-item label="状态">
                                <Radio-group v-model="props.items.is_complete">
                                    <Radio :label="-1">不限</Radio>
                                    <Radio :label="1">已完善</Radio>
                                    <Radio :label="0">未完善</Radio>
                                </Radio-group>
                            </Form-item>
                        </i-col>
                    </Row>
                </transition>
            </i-form>
        </template>
        <template slot="header">
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>电话</th>
                <th>省份</th>
                <th>学校</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </template>
        <template slot="tbody" scope="props">
            <tr>
                <td>{{props.item.id}}</td>
                <td>{{props.item.name}}</td>
                <td>{{props.item.mobile}}</td>
                <td>{{props.item.province_cn}}</td>
                <td>{{props.item.school_cn}}</td>
                <td>{{props.item.is_complete == 1 ? '完善' : '未完善'}}</td>
                <td class="col-xs-3">
                    <Tooltip content="密码重置" v-if="user.can('create-edit-data')" placement="top">
                        <i-button type="text"  v-on:click="resetPassword(props.item.user_id, props.item.name)"
                                  :disabled="stateManager.buttonLoading">
                            <Icon type="compose" size="16"></Icon>
                        </i-button>
                    </Tooltip>
                    <Tooltip content="编辑" v-if="user.can('create-edit-data')" placement="top">
                        <i-button type="text" v-on:click="showEditDialog(props.item.id)" :disabled="stateManager.buttonLoading">
                            <Icon type="edit" size="16"></Icon>
                        </i-button>
                    </Tooltip>
                    <Tooltip content="禁用" v-if="user.can('create-edit-data') && props.item.deleted_at == null" placement="top">
                        <i-button type="text"  v-on:click="deleteModel(props.item.id, props.item.name)"
                                  :disabled="stateManager.buttonLoading">
                            <Icon type="close-round" size="16"></Icon>
                        </i-button>
                    </Tooltip>
                    <Tooltip content="启用" v-if="user.can('create-edit-data') && props.item.deleted_at != null" placement="top">
                        <i-button type="text"  v-on:click="invocationModel(props.item.id, props.item.name)"
                                  :disabled="stateManager.buttonLoading">
                            <Icon type="ios-refresh" size="16"></Icon>
                        </i-button>
                    </Tooltip>
                    <Tooltip content="删除" v-if="user.can('create-edit-data')" placement="top">
                        <i-button type="text" v-on:click="forceDeleteModel(props.item.id, props.item.name)"
                                  :disabled="stateManager.buttonLoading">
                            <Icon type="trash-a" size="16"></Icon>
                        </i-button>
                    </Tooltip>
                    <Tooltip content="微信解绑" v-if="user.can('create-edit-data') && props.item.is_complete == 1" placement="top">
                        <i-button type="text"  v-on:click="openIdDelete(props.item.id, props.item.name)"
                                  :disabled="stateManager.buttonLoading">
                            <i class="iconfont icon-wechat" style="font-size: 16px"></i>
                        </i-button>
                    </Tooltip>
                </td>
            </tr>
        </template>

    </vue-table>

</template>

<script>
    export default {
        props: {
            stateManager: {
                type: Object
            }
        },
        data: function () {
            return {
                list: this.$listDataSource({
                    url: 'api/teacher'
                }),
                searchConfig: {
                    items: {
                        name: '',
                        mobile: '',
                        province_id: '',
                        city_id: '',
                        school_id: '',
                        dept_id: '',
                        speciality_id: '',
                        is_complete: null
                    },
                    complex: true,
                    status: true
                },
                openComplexStatus: false,
                model: this.$modelDataSource({
                    url: 'api/teacher',
                    dataKey: 'model',
                    attributes: {
                        id: 0,
                        name: '',
                    }
                }),
                cityList: [],
                schoolList: [],
                deptList: [],
                specialityList: [],
                newPassword: ''
            };
        },
        methods: {
            openComplex: function (openStatus) {
                this.openComplexStatus = openStatus;
                if (openStatus && this.provinceListLength < 1){
                    this.$store.dispatch('fetchProvinceList');
                }
            },
            getCityList: function (provinceId) {
                let self = this;
                if (provinceId > 0){
                    axios.get('api/data/city-list/' + provinceId).then(function (response) {
                        self.cityList = response.data;
                    });
                }else{
                    self.cityList = self.schoolList = self.deptList = self.specialityList = [];
                }
            },
            getSchoolList: function (cityId) {
                let self = this;
                if (cityId > 0){
                    axios.get('api/data/school-list/' + cityId).then(function (response) {
                        self.schoolList = response.data;
                    });
                }else{
                    self.schoolList = self.deptList = self.specialityList = [];
                }
            },
            getDeptList: function (schoolId) {
                let self = this;
                if (schoolId > 0){
                    axios.get('api/data/dept-list/' + schoolId).then(function (response) {
                        self.deptList = response.data;
                    });
                }else{
                    self.deptList = self.specialityList = [];
                }
            },
            getSpecialityList: function (deptId) {
                let self = this;
                if (deptId > 0){
                    axios.get('api/data/speciality-list/' + deptId).then(function (response) {
                        self.specialityList = response.data;
                    });
                }else{
                    self.specialityList = [];
                }
            },
            showEditDialog: function (id) {
                this.stateManager.editModelId = id;
                this.stateManager.buttonLoading = true;
            },
            deleteModel: function (modelId, modelName) {
                let self = this;
                this.$Modal.confirm({
                    title: '禁用确认',
                    content: '确认禁用' + modelName + '吗？禁用后无法登录前台',
                    loading: true,
                    onOk: function () {
                        self.model.reset();
                        self.model.uuid = modelId;
                        self.model.destroy(function () {
                            self.$Modal.remove();
                            self.stateManager.refreshList = true;
                            self.$Notice.success({
                                title: '禁用成功',
                                desc: modelName + '已禁用'
                            })
                        });
                    },
                    onCancel: function () {
                        console.log('取消删除');
                    }
                });
            },
            resetPassword: function (userId, userName) {
                let self = this;
                self.$Modal.confirm({
                    title: '重置登录密码',
                    render: (h) => {
                        return h('div',[
                            h('h4', userName),
                            h('Input', {
                                props: {
                                    type: 'password',
                                    value: self.newPassword,
                                    autofocus: true,
                                    placeholder: '请输入新密码！',
                                },
                                on: {
                                    input: (val) => {
                                        self.newPassword = _.trim(val);
                                    }
                                }
                            })
                        ]);
                    },
                    loading: true,
                    onOk: function () {
                        if (self.newPassword.length < 6 || self.newPassword.length > 25){
                            self.$Modal.remove();
                            self.$Notice.error({
                                title: '错误',
                                desc: '密码长度应该为6-25个字符'
                            });
                        }else{
                            axios.post('api/data/set-user-password/' + userId, {
                                password: self.newPassword
                            }).then(function (response) {
                                self.$Modal.remove();
                                self.$Notice.success({
                                    title: '重置成功',
                                    desc: userName + '已重置密码'
                                });
                                self.newPassword = '';
                            }).catch(function (error) {
                                console.log(error)
                            })
                        }
                    },
                    onCancel: function () {
                        console.log('取消重置');
                    }
                });
            },
            forceDeleteModel: function (modelId, modelName) {
                let self = this;
                this.$Modal.confirm({
                    title: '删除确认',
                    content: '确认删除' + modelName + '吗，删除后无法恢复',
                    loading: true,
                    onOk: function () {
                        axios.get('api/teacher/force-delete/' + modelId).then(function (response) {
                            self.stateManager.refreshList = true;
                            self.$Modal.remove();
                            self.$Notice.success({
                                title: '删除成功',
                                desc: modelName + '已删除'
                            });
                        }).catch(function (error) {
                            console.log(error)
                        })
                    },
                    onCancel: function () {
                        console.log('取消删除');
                    }
                });
            },
            invocationModel: function (modelId, modelName) {
                let self = this;
                this.$Modal.confirm({
                    title: '启用确认',
                    content: '确认启用' + modelName + '吗？启用后可正常登录前台',
                    loading: true,
                    onOk: function () {
                        axios.get('api/teacher/invocation/' + modelId).then(function (response) {
                            self.stateManager.refreshList = true;
                            self.$Modal.remove();
                            self.$Notice.success({
                                title: '启用成功',
                                desc: modelName + '已启用'
                            });
                        }).catch(function (error) {
                            console.log(error)
                        })
                    },
                    onCancel: function () {
                        console.log('取消删除');
                    }
                });
            },
            openIdDelete: function (modelId, modelName) {
                let self = this;
                this.$Modal.confirm({
                    title: '微信解绑确认',
                    content: '确认解绑' + modelName + '微信么？解绑后无法恢复！',
                    loading: true,
                    onOk: function () {
                        axios.get('api/teacher/open-id-delete/' + modelId).then(function (response) {
                            self.stateManager.refreshList = true;
                            self.$Modal.remove();
                            self.$Notice.success({
                                title: '解绑成功',
                                desc: modelName + '已解绑微信'
                            });
                        }).catch(function (error) {
                            console.log(error)
                        })
                    },
                    onCancel: function () {
                        console.log('取消删除');
                    }
                });
            }
        },
        computed: {
            user(){
                return this.$store.state.user;
            },
            tableList(){
                let self = this;
                if (this.stateManager.refreshList) {
                    this.list.fetch({}, function () {
                        self.stateManager.refreshList = false;
                    });
                }
                return this.list;
            },
            provinceList(){
                return this.$store.state.provinceList;
            },
            provinceListLength(){
                return this.$store.getters.getProvinceListLength;
            }
        }
    }
</script>